<template>
<div 
    class="copy-bt" 
    @click.stop="onCopy">
    <i class="el-icon-s-open"></i>
    {{title}}
</div>
</template>

<script>
/*
 数据复制组件
 */
export default {
    props:{
        title:{
            type:String,
            default:'',
        },
        content:{
            type:String,
            default:'',
        },
    },
    methods:{
        onCopy(){
            if(!this.content) return;
            this.$copyText(this.content).then(()=>{
                this.$notify({
                    title: '已复制！',
                    message: '希望该配色方案您能喜欢！',
                    position: 'bottom-right',
                });
            }).catch(()=>{
                return;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.copy-bt{
    box-sizing: border-box;
    width: fit-content;
    font-size: 1.8rem;
    background-color: rgba(0,0,0,.1);
    padding: 5px;
    line-height:100%;
    color: #ffffff;
    transition: all 0.2s;
    cursor: pointer;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    i{
        margin-right: 5px;
    }
    &:hover{
        background-color: rgba(0,0,0,.2);
    }
}
</style>

